import React, { useState } from 'react'
import "./index.css"
export default function Item({ todo, done, id, setTodoList, todoList }) {
  // 用isisActive来保存displya状态,初始默认值设置为false
  const [isActive, setIsActive] = useState(false)
  const mouseHandle = (bool) => {
    return () => {
      setIsActive(bool)
    }
  }

  // 多选框触发改变的事件函数
  const checkChangeHandle = (e) => {
    // console.log(e.target.checked);
    const newTodo = todoList.map(item => {
      if (item.id === id) {
        item.done = e.target.checked
      }
      return item
    })
    setTodoList(newTodo)
  }

  // 删除事件的回调函数逻辑
  const deleteHandle = ()=>{
    // 设置一个变量接收过滤出来的新数组
    const newTodoList= todoList.filter(item=>{
      // 这里要注意我们要过滤的新数组,也就是要返回的结果是我们没有点击的删除的数据
      // 所以这里的条件是当我们点击的那个数据不是要删除的那个数据就直接返回
      // 如果点击删除的数据就是我们要删除的数据,那么这个数据就不会被return出来,
      return item.id!=id
    })
    setTodoList(newTodoList)
  }


  return (
    // 给li绑定鼠标移入移出事件,以及添加一个active类名,移入和移出时这个这个类名会显示和隐藏
    // 而类名的显示和隐藏会影响鼠标移入移出时的高亮显示以及删除按钮的隐藏和显示
    <li
      onMouseEnter={mouseHandle(true)}
      onMouseLeave={mouseHandle(false)}
      className={isActive ? "active" : ""}
    >
      <label>
        {/* 给输入框绑定onChange事件,发生变化就可以触发 */}
        <input type="checkbox" checked={done} onChange={checkChangeHandle} />
        <span>{todo}</span>
      </label>
      {/* 因为删除按钮和鼠标移入移出显示高亮的逻辑是一样的,所以可以将鼠标移入移出的active逻辑跟删除显示隐藏逻辑设置为一样的
          移入active类名显示,高亮显示,删除按钮显示
      */}
      {/* 给删除按钮绑定点击事件 */}
      <button onClick={deleteHandle} className="btn btn-danger" style={{ display: isActive ? 'block' : 'none' }}>删除</button>
    </li>
  )
}
